<!--
 * @Descripttion: 消息列表
 * @version: V1.0
 * @Author: GW
 * @Date: 2022-01-08 17:52:54
 * @LastEditors: GW
 * @LastEditTime: 2022-01-12 11:34:02
-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="big-main-wrapper warehouse-type-wrapper message-manage-class" style="margin:2px 8px;">
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :span="2">
                            <div class="btns" @click="read(selectedKeys)">
                                <a-icon class="btns-icon" type="snippets" />
                                <div class="btns-text">标记已读</div>
                            </div>
                        </a-col>
                        <a-col :span="2" >
                            <div class="btns" @click="remove">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除</div>
                            </div>
                        </a-col>
                        <a-col :span="2">
                            <div class="btns" @click="getData">
                                <a-icon class="btns-icon" type="sync" />
                                <div class="btns-text">刷新</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <div class="table-wrapper-box">
                <!-- <a-tabs default-active-key="1" @change="callback">
                    <a-tab-pane key="1" tab="全部项目">

                    </a-tab-pane>
                    <a-tab-pane key="2" tab="我负责的项目">

                    </a-tab-pane>
                    <a-tab-pane key="3" tab="我参与的项目">

                    </a-tab-pane>
                </a-tabs> -->
                <a-table style="margin-top:0px !important" :loading="tableLoading" :customRow="customClick" :rowClassName="rowClassName" :row-selection="{ selectedRowKeys: selectedKeys, onChange: onSelectChange,columnWidth:10 }" :columns="columns" :pagination="pagination" :data-source="tableData" bordered>
                    <template slot="type" slot-scope="text,record">
                        {{text | msgFunction}}
                    </template>
                    <template slot="titlea" slot-scope="text,record">
                        <div v-if="record.status == 0">
                            <i class="fa fa-envelope"></i><span class="title">{{text}}</span>
                        </div>
                        <div v-else>
                            <i class="fa fa-envelope-open"></i><span class="title">{{text}}</span>
                        </div>
                    </template>
                </a-table>
            </div>
        </div>
        <msg-modal ref="msgModal"></msg-modal>
    </div>
</template>
<script>

import { mapState } from "vuex";

import { count, list, read, remove } from "@/api/message/msg";
import msgModal from "@/views/message/components/msgModal"
export default {
    components: {
        msgModal
    },
    data () {
        return {
            data: [],
            columns: [{
                title: '消息标题',
                dataIndex: 'title',
                width: 120,
                scopedSlots: { customRender: 'titlea' },
            }, {
                title: '消息内容',
                dataIndex: 'content',
                width: 500,
            }, {
                title: '接收时间',
                dataIndex: 'createDate',
                width: 120,
            }, {
                title: '消息类型',
                dataIndex: 'type',
                width: 120,
                scopedSlots: { customRender: 'type' },
            }],
            selectedKeys: [],
            selectedRows: [],
            pagination: {
                current: 1,
                pageSize: 20,
                total: 0,
                size: 'small',
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input style="height:22px !important;width:3.2rem;"
                                value={this.pagination.pageSize}
                                min={1}
                                max={10}
                                size="small"
                                step={1}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                onChange: (page, pageSize) => {
                    this.pagination.current = page;
                    this.pagination.pageSize = pageSize;
                    this.getData();
                }
            },
            rowClassName: (record, index) => {
                return record.status == 1 ? 'read-yes' : 'read-no';
            },
            tableData: [],
            customClick: (record, index) => ({
                on: {
                    click: (event) => {
                        event.preventDefault();
                        this.$refs.msgModal.showMsgDetails(record);
                        if (record.status == 0) {
                            this.read([record.id]);
                        }
                    },
                },
            }),
            msgType: 0, //消息类型 (默认所有) 0: 系统1客户2: 采购3: 销售4: 库存5: 生产6: 财务

            readIds: [],
            tableLoading: false,
        };
    },
    activated () {
        this.getData();;//获取动态字段
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    methods: {
        //改变分页大小
        changePageSize (e) {
            const value = e.target.value;
            let size = Number.parseInt(value);
            if (!size) {
                size = 20;
            }
            if (size > 500) {
                size = 500;
            }
            this.pagination.current = 1;
            this.pagination.pageSize = size;
            this.getData();
        },
        getData () {
            // 获取收发类别数据
            let data = {
                size: this.pagination.pageSize,
                current: this.pagination.current
            };
            this.tableLoading = true;
            list(data).then(res => {
                if (res.code == 200) {
                    this.tableLoading = false;
                    if (res.data.records.length > 0) {
                        this.tableData = res.data.records.map(r => {
                            return { ...r, key: r.id }
                        })
                        this.pagination.total = res.data.total;
                        this.pagination.current = res.data.current;
                        this.pagination.pageSize = res.data.size;
                    } else {
                        this.tableData = [];
                    }
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        read (idArray) {
            //阅读
            console.log('阅读ids:', idArray);
            read(idArray).then(res => {
                if (res.code === 200) {
                    if (idArray.length != 1) {
                        this.$message.success('标记已读成功');
                    }
                    this.selectedKeys = [];
                    this.selectedRows = [];
                    // this.$store.dispatch("actionsGetNumber");
                    this.getData();
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        remove () {
            let that = this;
            if(that.selectedKeys.length < 1){
                that.$message.warning('请选择要删除的消息');
                return;
            }
            this.$confirm({
                title: `是否确认删除？`,
                content: "",
                onOk () {
                    remove(that.selectedKeys).then(res => {
                        if (res.code == 200) {
                            that.selectedKeys = [];
                            that.selectedRows = [];
                            that.$message.success("删除成功");
                            that.$store.dispatch("actionsGetNumber");
                            that.getData();
                        } else {
                            that.$message.warning(res.message);
                        }
                    })
                },
                onCancel () { }
            });
        },
        onSelectChange (keys, rows) {
            this.selectedKeys = keys;
            this.selectedRows = rows;
        },
    },
    filters: {
        msgFunction (key) {
            //类型(默认所有) 0:系统1客户2:采购3:销售4:库存5:生产6:财务
            let text = '系统消息'
            switch (key) {
                case 0:
                    text = '系统消息';
                    break;
                case 1:
                    text = '客户消息';
                    break;
                case 2:
                    text = '采购消息';
                    break;
                case 3:
                    text = '销售消息';
                    break;
                case 4:
                    text = '库存消息';
                    break;
                case 5:
                    text = '生产消息';
                    break;
                case 6:
                    text = '财务消息';
                    break;
                default:
                    break;
            }
            return text;
        }
    }
};
</script>
<style lang="less">
    // .content-box {
    //     height: 100%;
    //     width: 240px;
    //     display: flex;
    //     flex-flow: column;
    // }
    @import '~@/style/setting/inventory.less';
    .message-manage-class {
        .warehouse-type-wrapper {
            margin: 0px;
        }
        .phase-box {
            .ant-form-item {
                margin-bottom: 0px;
            }
        }
        .table-wrapper-box {
            height: calc(100% - 45px);
            overflow-y: auto;
        }
        .a-label {
            color: #1890ff;
            display: block;
            cursor: pointer;
        }
        .read-yes {
            .fa-envelope-open,
            .title {
                color: #7e7e7e;
            }
        }
        .read-no {
            .fa-envelope,
            .title {
                color: #00a0e9;
            }
        }
    }
</style>